<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>贪玩舔狗🐶</title>
  <link rel="stylesheet" href="./CSS/style.css">
</head>

<body>

  <img class="wsc" src="./images/wsc.jpg" alt="王思聪">

  <div class="play-panel">
    <div class="start"><span class="btn">❥开始游戏</span></div>
    <div class="stop">
      <div class="title">游戏结束</div>
      <div class="score">60分</div>
      <div class="btn">※重新开始※</div>
    </div>
  </div>

  <div class="game-score">
    <h1>剩余时间<span>60</span>秒</h1>
    <h1>+10分</h1>
  </div>

  <script>
    function random(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min)
    }

    // ### 全局变量
    var wscObj = document.querySelector('.wsc')
    var score = 0
    var wscX = 0
    var wscY = (window.innerHeight || document.documentElement.clientHeight) - wscObj.offsetHeight


    // ###随机食物 x轴
    // 1 打开页面，执行定时器代码 1s
    // 2 定时器处理函数中 
    //   2.1 随机数0-9  
    //   2.2 判断2.1随机数68创建冠军食物，01234579热狗食物
    //   2.3 追加食物到页面

    function startFoodPlay() {
      // 返回定时器唯一标识
      return setInterval(() => {
        // 初始化数据
        var imgObj = document.createElement('img')

        // 食物出现概率
        var who = random(0, 9) // 68-冠军,01234579-热狗

        // 判断出现食物
        if ([6, 8].includes(who)) {
          // <img class="guanjun" src="./img/guanjun.jpg" />
          imgObj.className = 'food guanjun'
          imgObj.src = './images/guanjun.jpg'
          imgObj.setAttribute('type', 'guanjun')
        } else {
          // <img class="hotdog" src="./img/hotdog.jpg" />
          imgObj.className = 'food hotdog'
          imgObj.src = './images/hotdog.jpg'
          imgObj.setAttribute('type', 'hotdog')
        }

        // 追加食物到页面
        var min = 0
        var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth
        imgObj.style.left = random(min, max) + 'px'
        imgObj.style.top = '0px'
        document.body.appendChild(imgObj)
      }, 1000)
    }
    var foodT = startFoodPlay() // 首次开始


    // ### 食物掉落 y轴
    // 1 打开页面，执行定时器代码 50ms
    // 2 定时器处理函数中 
    //   2.1 获取所有食物
    //   2.2 遍历
    //   2.3 计算top数据：原top+ 2
    //   2.4 判断位置  超出-网页移除，没超出-重置top

    setInterval(() => {
      // 获取所有食物
      var foods = document.querySelectorAll('.food')
      // 遍历
      foods.forEach((item, index) => { // item就是一个个图片食物
        // 计算top数据：原top+ 2
        var top = parseInt(item.style.top) + 2
        // 判断位置  超出-网页移除，没超出-重置top
        var maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight
        if (top >= maxTop) {
          document.body.removeChild(item)
        } else {
          item.style.top = top + 'px'
        }

        // 3. 食物掉落判断是否在王公子范围内
        //    公式x：  食物x > 王公子x  && 食物x < 王公子x+自身宽度
        //    公式y：  食物y+自身高度 > 王公子y
        //    符 合：【公式x、公式y】则分数+1
        var foodX = parseInt(item.style.left)
        var foodY = parseInt(item.style.top) + item.offsetHeight
        if (
          (foodX > wscX && foodX <= (wscX + wscObj.offsetWidth))
          &&
          foodY > wscY
        ) {
          var type = item.getAttribute('type')
          // score++
          type == 'guanjun' ? score += 5 : score++
          console.log(`食物坐标【${foodX},${foodY}】，王公子坐标【${wscX + wscObj.offsetWidth},${wscY + wscObj.offsetHeight}】，+1，总分【${score}}】`);
          document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
          document.body.removeChild(item)

          // 提示 <div class="show-score">+1</div>
          var divObj = document.createElement('div')
          divObj.className = 'show-score'
          divObj.innerText = type == 'guanjun' ? '+5' : '+1'
          divObj.style.left = wscX + wscObj.offsetWidth + 'px'
          // divObj.style.bottom = wscY+wscObj.offsetHeight + 'px'
          document.body.appendChild(divObj)
          setTimeout(() => document.body.removeChild(divObj), 1000)
        }

      })
    })
    // ### 安排王公子
    // 1 打开网页，绑定鼠标移动事件
    // 2 事件处理函数中
    //   2.1 获取事件对象
    //   2.2 限定left最大0 最大网页宽度-王公子宽度
    //   2.3 同步left为鼠标位置

    document.onmousemove = function (evt) {
      // 获取事件对象
      var e = evt || window.event
      // 限定left最大0 最大网页宽度-王公子宽度
      var wscObj = document.querySelector('.wsc')
      var left = e.clientX - wscObj.offsetWidth / 2
      var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
      if (left < 0) left = 0
      if (left >= maxLeft) left = maxLeft
      // 同步left为鼠标位置
      wscObj.style.left = left + 'px'

      // 重置王公子坐标
      wscX = left
    }


    // ### 吃食物
    // 1. script开始标记位置定时全局变量 保存王公子坐标
    // 2. 王公子移动 重置全局变量
    // 3. 食物掉落判断是否在王公子范围内
    //    公式x：  食物x > 王公子x  && 食物x <= 王公子x+自身宽度
    //    公式y：  食物y+自身高度 > 王公子y  
    //    符 合：【公式x、公式y】则分数+1


    // ### 结束游戏
    // 1 打开页面，执行定时器代码 1s
    // 2 定时器处理函数中 
    //   2.1 time--
    //   2.2 判断
    //   time>=0 同步到页面
    //   else   1-清除游戏倒计时、2-清除随机食物、3-重置游戏60s、4-展示重新开始面板
    var time = 60
    function startTimePlay() {
      return setInterval(() => {
        time--
        var gameScoreObj = document.querySelector('.game-score span')
        if (time >= 0) {
          gameScoreObj.innerText = time
        } else {

          clearInterval(gameT) // 1-清除游戏倒计时
          clearInterval(foodT) // 2-清除随机食物
          time = 60            // 3-重置游戏60s
          // 4-展示重新开始面板
          var payPanel = document.querySelector('.play-panel')
          var payPanelStop = payPanel.querySelector('.stop')
          payPanel.querySelector('.score').innerText = score + '分'
          payPanel.style.display = payPanelStop.style.display = 'block'
        }
      }, 1000)
    }
    var gameT = startTimePlay()


    // ### 重新开始游戏
    var startBtn = document.querySelector('.play-panel .stop .btn')
    startBtn.onclick = function () {
      // 清空分数
      score = 0
      document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
      // 开始游戏
      foodT = startFoodPlay()
      gameT = startTimePlay()
      // 开启面板
      var payPanel = document.querySelector('.play-panel')
      var payPanelStop = payPanel.querySelector('.stop')
      payPanel.style.display = payPanelStop.style.display = 'none'
    }
  </script>
</body>

</html>